<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <script src="javascripts/three.js"></script>
    <script src="javascripts/TrackballControls.js"></script>
    <script src="javascripts/TinyTrackballControls.js"></script>
    <script src="javascripts/Projector.js"></script>

    <script src="javascripts/jquery-2.2.4.js"></script>
    <script src="javascripts/jquery-ui.js"></script>

    <link rel="stylesheet" href="/stylesheets/jquery-ui.css"/>
    <link rel="stylesheet" href="/stylesheets/layout-default-latest.css"/>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
          integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
            integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
            crossorigin="anonymous"></script>

    <script src="http://blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
</head>
<body>


<!--
see https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
-->

<span class="btn btn-success fileinput-button">
        <i class="icon-plus icon-white"></i>        
        <input id="fileupload" type="file" name="files[]" multiple data-url="/file-upload">
</span>

<div id="progress" class="progress progress-success progress-striped">
    <div class="bar"></div>
</div>
<div id="files">
</div>

<br>

<hr>
<button id="zoomAll">Zoom All</button>
<hr>

<div style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1;">
    <div id="graphical_view" class="graphical_view"
         style="top:0;left:0;width:100%;height:100%;background-color:#8cabc2;  background-color: #8cabc2; margin: 0px; overflow: hidden; background-image:   -webkit-linear-gradient(#8cabc2, #becfdc, #c5d5e0); background-image: -moz-linear-gradient(#8cabc2, #becfdc, #c5d5e0); background-image: -o-linear-gradient(#8cabc2, #becfdc, #c5d5e0); background-image: linear-gradient(#8cabc2, #becfdc, #c5d5e0);"></div>
</div>

<div id="response"></div>
</body>
<script src="client_app.js"></script>
<script>

    var view;

    function install_json_mesh(json) {

        "use strict";

        view.clearAll();
        view.updateShapeObject(json, function () {
            view.zoomAll();
        });

        // log
        json.logs.forEach(function (line) {
            var str = "";
            for (var a in line) {
                str += line[a];
            }
            //  $("#ascii_mesh").append("<p>" + str + "</p>");
        })

    }


    function handle_json_error(request, statusText, errorThrown) {
        console.log(" ERRROR : ", statusText, errorThrown);
    }

    var lastAjaxDuration, lastAjaxStart;

    function load_cadfile(filename) {

        $.ajax({
            url: "/load_cadfile",
            data: JSON.stringify({filename: filename}),
            type: "POST",
            contentType: "application/json",
            cache: false,
            dataType: "text",
            statusCode: {
                404: function () {
                    $("#response").html('Could not contact server.');
                },
                500: function () {
                    $("#response").html('A server-side error has occurred.');
                }
            },
            success: function (response) {
                if (response) {
                    size_in_byte = response.length;
                    lastAjaxDuration = new Date() - lastAjaxStart;
                    // $("#ascii_mesh").append("<p>duration: " + lastAjaxDuration + " ms   - size :" + bytesToSize(size_in_byte,3) + "</p>");

                }
            },
            error: handle_json_error
        }).done(function (json) {
            var t1 = new Date();
            var obj = JSON.parse(json);
            var t2 = new Date();
            install_json_mesh(obj);
            var t3 = new Date();
            $("#ascii_mesh").append("<p>parsing duration: " + (t2 - t1) + " ms " + " " + (t3 - t2) + " ms </p>");
        });
    }


    $(document).ready(function () {
        "use strict";

        $("#progress").hide();

        var container = $("#graphical_view");

        if (container.size() === 0) {
            throw Error("Cannot find graphical view div");
        }

        view = new GEOMVIEW(container[0]);

        //$("#button").click(send_and_build_up_csg);

        $("#zoomAll").click(function () {
            view.zoomAll();
        });

        $('#fileupload').fileupload({
            dataType: 'json',
//            fail: function (e, data) {
//                $('#progress').hide();
//                alert("cannot upload file");
//            },
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name + " " + file.size + " bytes").appendTo('#files');
                    $('#progress').hide();
                    load_cadfile(file.path);
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress').show();
                $('#progress .bar').css('width', progress + '%');
            }
        });


    });

</script>
<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
        a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-41181410-1', 'cloudapp.net');
    ga('send', 'pageview');

</script>
</html>
